<template>
    <div class="auth-root-box">
        <section class="tree-box" :class="rightEduTransfer?'half':'all'">
            <p v-if="leftTitle" class="transfer-title">{{leftTitle}}</p>
            <div class="transfer-search">
                <p v-if="leftChecked">
                    <el-checkbox
                        :indeterminate="isLeftIndeterminate"
                        v-model="checkLeft"
                        @change="handleLeftCheckAllChange"
                    >全选</el-checkbox>
                </p>
            </div>
            <div class="content">
                <el-tree
                    :style="leftTreeStyle"
                    :data="leftData"
                    :show-checkbox="showCheckBox"
                    :default-expand-all="leftExpandAll"
                    node-key="id"
                    @check="leftCheckChange"
                    ref="leftTree"
                />
            </div>
        </section>
        <section v-if="rightEduTransfer" class="transfer-box">
            <center>
                <el-button circle class="el-icon-d-arrow-right" @click="addNodes"/>
            </center>
            <br>
            <center>
                <el-button circle class="el-icon-d-arrow-left" @click="removeNodes"/>
            </center>
        </section>
        <section v-if="rightEduTransfer" class="tree-box" :class="rightEduTransfer?'half':'all'">
            <p v-if="rightTitle" class="transfer-title">{{rightTitle}}</p>

            <div class="transfer-search">
                <p v-if="rightChecked">
                    <el-checkbox
                        :indeterminate="isRightIndeterminate"
                        v-model="checkRight"
                        @change="handleRightCheckAllChange"
                    >全选</el-checkbox>
                </p>
            </div>
            <div class="content">
                <el-tree
                    :style="rightTreeStyle"
                    :data="rightData"
                    :show-checkbox="showCheckBox"
                    :default-expand-all="rightExpandAll"
                    :accordion="true"
                    node-key="id"
                    @check="rightCheckChange"
                    ref="rightTree"
                />
            </div>
        </section>
    </div>
</template>

<script>
export default {
    name: "tutorSelect",

    data() {
        return {
            checkLeft: false,
            checkRight: false,
            isLeftIndeterminate: false,
            isRightIndeterminate: false,
            selectedValue: "",
            leftTreeStyle: "",
            rightTreeStyle: ""
        };
    },
    props: {
        leftExpandAll: {
            default: false,
            type: Boolean
        },
        rightExpandAll: {
            default: false,
            type: Boolean
        },
        showCheckBox: {
            default: true,
            type: Boolean
        },
        rightEduTransfer: {
            default: true,
            type: Boolean
        },
        leftSearch: {
            default: false,
            type: Boolean
        },
        leftFilter: {
            default: false,
            type: Boolean
        },
        leftChecked: {
            default: false,
            type: Boolean
        },
        rightChecked: {
            default: false,
            type: Boolean
        },
        rightFilter: {
            default: false,
            type: Boolean
        },
        leftTitle: {
            default: "",
            type: String
        },
        leftTransferData: {
            default: "",
            type: String
        },
        rightTitle: {
            default: "",
            type: String
        },
        rightTransferData: {
            default: "",
            type: String
        },
        selectedBySearch: {
            default: false,
            type: Boolean
        }
    },
    computed: {
        rightData() {
            this.rightFilterText = "";
            this.checkRight = false;
            this.isRightIndeterminate = false;
            if (this.rightTransferData && this.rightTransferData !== "[]") {
                let data = JSON.parse(this.rightTransferData);
                var list = [];
                for (var index = 0; index < data.length; index++) {
                    var obj = {
                        label: `${data[index].name}(${data[index].code})`,
                        id: data[index].code
                    }
                    list.push(obj);
                }
                return list;
            } else {
                this.checkRight = false;
                return [];
            }
        },
        leftData() {
            this.leftFilterText = "";
            this.checkLeft = false;
            this.isLeftIndeterminate = false;
            if (
                this.leftTransferData.length &&
                this.leftTransferData !== "[]"
            ) {
                let data = [];
                data = JSON.parse(this.leftTransferData);

                var list = [];
                for (var index = 0; index < data.length; index++) {
                    var obj = {
                        label: `${data[index].name}(${data[index].code})`,
                        id: data[index].code
                    }
                    list.push(obj);
                }
                return list;
            } else {
                return [];
            }
        }
    },
    mounted() {
        let leftCount = 0;
        if (this.leftTitle) {
            leftCount++;
        }
        if (this.leftChecked || this.leftFilter || this.leftSearch) {
            leftCount++;
        }
        let leftHeight = 360 - leftCount * 36 + "px";
        this.leftTreeStyle = {
            height: leftHeight
        };
        let rightCount = 0;
        if (this.rightTitle) {
            rightCount++;
        }
        if (this.rightChecked || this.rightFilter || this.rightSearch) {
            rightCount++;
        }
        let rightHeight = 360 - rightCount * 36 + "px";
        this.rightTreeStyle = {
            height: rightHeight
        };
    },
    methods: {
        handleLeftCheckAllChange(e) {
            // 全选与反选
            this.checkLeft = e;
            if (e) {
                this.$refs.leftTree.setCheckedNodes(this.leftData);
                this.isLeftIndeterminate = false;
            } else {
                this.$refs.leftTree.setCheckedNodes([]);
                this.isLeftIndeterminate = false;
            }
            this.leftCheckChange();
        },
        handleRightCheckAllChange(e) {
            // 全选与反选
            this.checkRight = e;
            if (e) {
                this.$refs.rightTree.setCheckedNodes(this.rightData);
                this.isRightIndeterminate = false;
            } else {
                this.$refs.rightTree.setCheckedNodes([]);
                this.isRightIndeterminate = false;
            }
            this.rightCheckChange();
        },
        addNodes() {
            let checkedList = this.$refs["leftTree"].getCheckedNodes();
            if (checkedList.length == 0) {
                return;
            }
            var _leftData = JSON.parse(this.leftTransferData);
            var _addList = [];
            var _leftNew = [];
            for (var index = 0;index < _leftData.length; index++) {
                var isContain = false;
                for (var index_y = 0;index_y < checkedList.length; index_y++) {
                    if (_leftData[index].code == checkedList[index_y].id) {
                        isContain = true;
                        _addList.push(_leftData[index]);
                        break;
                    }
                }
                if (!isContain) {
                    _leftNew.push(_leftData[index]);
                }
            }
            this.leftTransferData = JSON.stringify(_leftNew);
            var _rightData = JSON.parse(this.rightTransferData);
            for (var index = 0 ; index< _addList.length; index++) {
                _rightData.push(_addList[index]);
            }
            this.rightTransferData = JSON.stringify(_rightData);
            let result = {
                addList: _addList,
                leftData: _leftNew,
                rightData: _rightData
            };
            let json = {
                result: result
            }
            this.$emit("addNodesToRight", json);
        },
        removeNodes() {
            // 解析选中的节点以及父节点的id
            let checkedList = this.$refs["rightTree"].getCheckedNodes();
            if (checkedList.length == 0) {
                return;
            }
            var _rightData = JSON.parse(this.rightTransferData);
            var _addList = [];
            var _rightNew = [];
            for (var index = 0;index < _rightData.length; index++) {
                var isContain = false;
                for (var index_y = 0;index_y < checkedList.length; index_y++) {
                    if (_rightData[index].code == checkedList[index_y].id) {
                        isContain = true;
                        _addList.push(_rightData[index]);
                        break;
                    }
                }
                if (!isContain) {
                    _rightNew.push(_rightData[index]);
                }
            }
            this.rightTransferData = JSON.stringify(_rightNew);
            var _leftData = JSON.parse(this.leftTransferData);
            for (var index = 0 ; index< _addList.length; index++) {
                _leftData.push(_addList[index]);
            }
            this.leftTransferData = JSON.stringify(_leftData);
            let result = {
                deleteList: _addList,
                leftData: _leftData,
                rightData: _rightNew
            };
            let json = {
                result: result
            }
            this.$emit("delNodesFromRight", json);
        },
        leftCheckChange() {
            let checkedNodes = this.$refs["leftTree"].getCheckedNodes();
            let len = checkedNodes.length;
            let oldLen = JSON.parse(this.leftTransferData).length;
            if (oldLen === 0) {
                this.isLeftIndeterminate = false;
                this.checkLeft = false;
            } else if (len === oldLen) {
                this.isLeftIndeterminate = false;
                this.checkLeft = true;
            } else if (len === 0) {
                this.isLeftIndeterminate = false;
                this.checkLeft = false;
            } else {
                this.isLeftIndeterminate = true;
            }
            this.$emit("checkChange", checkedNodes);
        },
        rightCheckChange() {
            let checkedNodes = this.$refs["rightTree"].getCheckedNodes();
            let len = checkedNodes.length;

            let oldLen = JSON.parse(this.rightTransferData).length;
            if (oldLen === 0) {
                this.isLeftIndeterminate = false;
                this.checkLeft = false;
            } else if (len === oldLen) {
                this.isRightIndeterminate = false;
                this.checkRight = true;
            } else if (len === 0) {
                this.isRightIndeterminate = false;
                this.checkRight = false;
            } else {
                this.isRightIndeterminate = true;
            }
        }
    }
};
</script>


<style lang="scss" scoped>
.auth-root-box {
    padding: 0;
    margin: 0;
    height: 360px;
    section {
        overflow: hidden;
        height: 100%;
        float: left;
        .left-text {
            height: 30px !important;
        }
    }
    section.half {
        width: 45%;
    }
    section.all {
        width: 100%;
    }
    section.tree-box {
        border: 1px solid #e5e5e5;
        border-radius: 2px;
        .transfer-title {
            background-color: #eee;
            margin: 0px;
            color: #303133;
            margin: 0;
            padding: 0;
            height: 36px;
            line-height: 36px;
            font-weight: 600;
            border-bottom: 1px solid #e5e5e5;
            padding-left: 12px;
        }
        .transfer-search {
            background-color: #eee;
            display: flex;
            overflow: hidden;
            .select-dept {
                flex: 3;
                flex-shrink: 1;
                margin-left: 10px;
                display: flex;
                overflow: hidden;
                .el-select {
                    flex: 2;
                    flex-basis: 40px;
                    height: 34px !important;
                    overflow: hidden;
                    border: 1px solid #ddd;
                }
                .el-button {
                    flex: 1;
                    padding: 0;
                    min-width: 10px !important;
                }
            }
            .el-input {
                flex: 2;
                flex-shrink: 1;
                overflow: hidden;
            }
            p {
                flex: 1 0 25px;
                margin: 0;
                padding: 0;
                height: 36px;
                line-height: 36px;
                font-weight: 600;
                border: 1px solid #e5e5e5;
                padding-left: 12px;
                background: #eee;
            }
            .content {
                overflow: hidden;
                height: 100%;
            }
        }
        div {
            width: 100%;
            overflow: auto;
        }
        .el-tree {
            padding: 5px;
        }
    }
    section.transfer-box {
        width: 8%;
        padding-top: 120px;
        .el-button {
            margin-bottom: 10px;
        }
    }
}
</style>
